<!-- 专题详情页 -->
<template>
	<div id="nav">
		<common-header :tittle="tittle" :showmore="true"></common-header>
    
    <!-- 蒙版层 -->
    <div class="father">
    	<div class="mask" v-show="maskShow" @click="setMaskShow"></div>
    	<div class="child" id="child" v-show="maskShow">
        <p> <span>目录</span></p>
    		<ul v-for="item in label" :key="item.id">
    			<li v-text="item.txt">
            
          </li>
    		</ul>
    	</div>
    	<div @click="setMaskShow" class="bp">标签</div>
    </div>
    
		<!-- 详情列表组件 -->    
		<div class="box">
			<div class="special-introduce" >
				<h3>基本介绍</h3>
				<p>在建水县燕子洞新石器时代遗址中</p>
				<h3>传承时间</h3>
				<p>截止2018年，建水紫陶传承约3500多年历史。</p>
				<img src="../../../../assets/imgs/banner2.png" alt="">
				<h3 id="a02">历史渊源</h3>
				<p>在建水县燕子洞新石器时代遗址中，发现了距今3
					500多年的陶丸、陶网坠，证明建水早在新石器时
					代就有了原始制陶工艺。建水陶瓷萌芽于新石器时
					代晚期。建水紫陶历经汉唐宋，成长于元明清时期，
					民间有"宋代有青瓷，元代有青花，明代有粗陶，
					清末有紫陶"的说法。</p>
			</div>
		</div>
		<!-- <special-introduce :title="tittle"></special-introduce> -->
	</div>
</template>

<script>
	import {
		Popup
	} from 'mint-ui';
	// import special from 'common/special-introduce'
	import commonHeader from 'common/common-header-back'
	var describe = ""
	export default {
		data() {
			return {
        label:[
        	{
        		txt:"基本介绍"
        	},
        	{
        		txt:"传承时间"
        	},
        	{
        		txt:"历史渊源"
        	},
        	{
        		txt:"传承人"
        	},
        	{
        		txt:"制作工艺"
        	},
        	{
        		txt:"艺术价值"
        	},
        	{
        		txt:"产业现状"
        	},
        
        ],
				maskShow: false,
				slots: [{
					flex: 1,
					values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
					className: 'slot1',
					textAlign: 'right'
				}, {
					divider: true,
					content: '-',
					className: 'slot2'
				}, {
					flex: 1,
					values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
					className: 'slot3',
					textAlign: 'left'
				}],

				show: false,
				tittle: '专题详情页',
				list: {
					txtr: "在建水县燕子洞新石器时代遗址中",
				},

			};
		},
		components: {
			commonHeader,
			// special
		},
		methods: {
			setMaskShow() {
				this.maskShow = !this.maskShow;
			}


		},


	}
</script>


<style lang="less" scoped>
	@import "~styles/index.less";
	@import "~styles/variable.less";

	.Router {
		position: relative;
	}

	div.popContainer {

		z-index: 999;
		position: fixed;
		top: 50px;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.3);

		.tran {
			width: 100%;
			height: 100%;
			position: relative;
		}

		.nav-bp {
			position: absolute;
			width: 50%;
			height: 100%;
			top: 0;
			right: 0;

			background: @base-blue-color;
		}
	}

	.father {
    margin-top:50px;
		width: 100%;
		height: 100%;
	}

	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.3;
	}

	button {
		width: 100px;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}

	.child {
    z-index: 999;
		position: fixed;
		width:60%;
		height: calc(100% - 50px);
		text-align: center;
		top:50px;
    right:0px;
    
		background: @base-blue-color;
    ul{
      width: 100%;
      li{
        text-align: left;
        width: calc(100% - 40px);
        border-bottom: 1px solid #18BBC2;
        line-height: 40px;
        font-size: 15px;
        color:#fff;
        height: 40px;
        margin-left:40px;
      }
    }
    p{
      margin-top:50px;
      color:#fff;
      font-size: 18px;
      text-align: center;
      margin-bottom: 30px;
      span{
        display: inline-block;
        position: relative;
        &:after{
        	position: absolute;
        	content: '';
        	width:6px;
        	height: 6px;
        	border-radius: 50%;
        	background:#fff;
        	top:0;
        	left:-63px;
          bottom:0;
          right:0;
          margin:auto;
        }
        &:before{
        	position: absolute;
        	content: '';
        	width:6px;
        	height: 6px;
        	border-radius: 50%;
        	background:#fff;
        	top:0;
        	left:50px;
        	bottom:0;
        	right:0;
        	margin:auto;
        }
      }
     
    }
	}

	.bp {
		width: 61px;
		height: 14px;
		font-size: 15px;
		position: fixed;
		top: 50%;
		display: inline-block;
		font-size: 15px;
		width: 50px;
		height: 40px;
		line-height: 40px;
		background: @base-blue-color;
		color: #ffffff;
		border-bottom-left-radius: 23px;
		border-top-left-radius: 23px;
		box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.16);
		right: 0;
	}

	.box {
		background: #fff;
		height: 100%;
		margin-top: 50px;
		padding: 30px 15px 50px 15px;
	}


	.special-introduce {




		img {
			width: 100%;
			margin-bottom: 40px;
		}

		h3 {
			font-size: 16px;
			text-align: left;
			font-weight: bold;
			position: relative;
			text-indent: 8px;

			&:after {
				position: absolute;
				content: '';
				width: 4px;
				height: 15px;
				border-radius: 2px;
				background: @base-blue-color;
				left: 0;
				right: 0;
				top: 1px;
				margin-left: 0;
				margin-right: auto;
			}

			&:before {
				content: '';
				position: absolute;
				font-weight: bold;
				right: 0px;
				top: 0;
				color: #e5e5e5;
				height: 20px;
				width: 20px;
				background-size: 100% 100%;

			}
		}

		p {
			text-align: left;
			font-size: 15px;
			margin-top: 20px;
			color: @base-sp-text-color;
			margin-bottom: 30px;
		}
	}
</style>
